<style lang="scss" scoped>
.list {
  padding: 10px;
  dl {
    dt {
      display: flex;
      div {
        width: 80px;
        height: 80px;
        background: #f1f1f1;
        border-radius: 50%;
        img {
          width: 80px;
          height: 80px;
        }
      }
      span {
        margin-top: 30px;
      }
    }
    dd {
      padding: 10px;
      .name {
        display: flex;

        p {
          margin: 5px 30px;
        }
      }
      .ZY {
        display: flex;
        .ZY1 {
          width: 20%;
          height: 50px;
          h3 {
            width: 60px;
            height: 50px;
            color: #00c692;
            font-family: '宋体';
          }
        }

        .ZY2 {
          width: 80%;
          height: 50px;
        }
        .ZY3 {
          width: 90px;
          height: 35px;
          position: absolute;
          right: 20px;
          color: #00c692;
          font-size: 17px;
        }
      }
    }
  }
}
.t1 {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  color: #ccc;
  font-size: 15px;
  border-bottom: 1px solid #ccc;
}
.CZ {
  width: 100%;
  height: 50px;
  .CZ1 {
    width: 100%;
    height: 50px;
    display: flex;
  }
}
.JZ {
  padding: 10px;
  h1 {
    width: 100%;
  }
}
.JZ1 {
  dl {
    display: flex;
    dt {
      width: 50px;
      height: 100px;
      div {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #ccc;
      }
      img {
        width: 50px;
        height: 50px;
      }
    }
    dd {
      padding: 10px;
      div {
        font-size: 15px;
      }
    }
  }
}
.addrss {
  display: flex;
  flex-wrap: wrap;

  div {
    text-align: center;
    align-content: center;
    margin: 14px;
    width: 150px;
    height: 40px;
    background: skyblue;
    border-radius: 10px;
  }
}
.active {
  color: #fff;
}
</style>

<template>
  <div>
    <header>
      <van-nav-bar
        v-if="v"
        left-arrow
        @click-left="$router.back()"
        :title="v[0].doctorname"
      />
    </header>
    <div class="list" v-if="v">
      <dl>
        <dt>
          <div><img :src="v[0].doctorimage" alt="" /></div>
          <span><van-tag type="success">知名专家</van-tag></span>
        </dt>
        <dd>
          <div class="name">
            <h2>{{ v[0].doctorname }}</h2>
            <p>{{ v[0].doctorstate }}</p>
            <p>{{ v[0].doctoradministre }}</p>
          </div>
          <h3>{{ v[0].nosocomium }}</h3>
          <div class="ZY">
            <div class="ZY1"><h3>专业擅长</h3></div>

            <div class="ZY2">
              <van-text-ellipsis :content="v[0].doctordescword" rows="2" />
              <van-popup
                v-model:show="show"
                closeable
                position="bottom"
                :style="{ height: '60%' }"
              >
                <h1 style="text-align: center">执业简介</h1>
                <div style="padding: 10px">
                  <h2>个人简介：</h2>
                  <h4 style="line-height: 20px; font-size: 15px; color: #ccc">
                    {{ v[0].doctordescword }}
                  </h4>
                </div>
                <div style="padding: 10px">
                  <h2>专业擅长</h2>
                  <h4 style="line-height: 20px; font-size: 15px; color: #ccc">
                    {{ v[0].socodescword }}
                  </h4>
                </div>
              </van-popup>
              <div class="ZY3" @click="showPopup">查看简介></div>
            </div>
          </div>
          <div class="t1">
            <div>
              <span><van-icon name="flower-o" color="#24cc9e" /></span>官方号源
            </div>
            <div>
              <span><van-icon name="flower-o" color="#24cc9e" /></span>医生本人
            </div>
            <div>
              <span><van-icon name="flower-o" color="#24cc9e" /></span>平台认证
            </div>
            <div>
              <span><van-icon name="flower-o" color="#24cc9e" /></span>诊前退款
            </div>
          </div>
        </dd>
      </dl>
    </div>

    <div style="display: flex; padding: 10px">
      <div
        style="
          width: 20px;
          height: 60px;
          background: #00c692;
          text-align: center;
          color: #fff;
        "
      >
        出诊地
      </div>
      <van-cell
        center
        :title="v[0].nosocomium"
        is-link
        :label="v[0].socolv"
        v-if="v"
        @click="$router.push(`/RDetail/${v[0].socoid}`)"
      />
    </div>

    <van-popup
      v-model:show="showMake"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
    >
      <h1 style="text-align: center">选择就诊时间</h1>
      <div class="addrss">
        <div
          v-for="(v, i) in list"
          :class="{ active: currentIndex === i }"
          @click="onTab(v, i)"
        >
          {{ v }}
        </div>
      </div>
      <div style="margin-top: 100px;">
        <van-button type="success" round size="large" @click='$router.push(`/Make/${id}`)'>确定</van-button>
      </div>
    </van-popup>

    <div style="display: flex; padding: 10px">
      <div
        style="
          width: 20px;
          height: 100px;
          background: #effffd;
          text-align: center;
          color: #00c692;
          flex-direction: column;
          align-content: center;
        "
      >
        近四周
      </div>
      <div class="CZ">
        <div class="CZ1" v-if="v">
          <div>
            <div>
              <h2>{{ v[0].textdatetime }}上午</h2>
            </div>
            <div>
              <p>普通:{{ v[0].doctorprice }}</p>
            </div>
          </div>

          <div style="position: absolute; right: 10px">
            <van-button round type="success" @click="onMake"
              >剩余{{ v[0].textdoctor }}</van-button
            >
          </div>
        </div>
        <div style="width: 100%; height: 50px; display: flex" v-if="v">
          <div>
            <div>
              <h2>{{ v[0].textdatetime }}下午</h2>
            </div>
            <div>
              <p>普通:{{ v[0].doctorprice }}</p>
            </div>
          </div>

          <div style="position: absolute; right: 10px">
            <van-button round type="success" @click="handYYGH(v)"
              >剩余{{ v[0].textdoctor }}</van-button
            >
          </div>
        </div>
      </div>
    </div>
    <div class="JZ">
      <h1>就诊评价</h1>
      <div class="JZ1" v-if="v">
        <dl>
          <dt>
            <div><img :src="v[0].doctorimage" alt="" /></div>
          </dt>
          <dd>
            <div>
              m**
              <span
                ><van-rate
                  v-model="value"
                  :size="15"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
              /></span>
            </div>
            <p>
              <van-text-ellipsis
                rows="2"
                :content="v[0].socodescword"
                expand-text="展开"
                collapse-text="收起"
              />
            </p>
          </dd>
        </dl>
        <dl>
          <dt>
            <div><img :src="v[0].textimage" alt="" /></div>
          </dt>
          <dd>
            <div>
              m**
              <span
                ><van-rate
                  v-model="value"
                  :size="15"
                  color="#ffd21e"
                  void-icon="star"
                  void-color="#eee"
              /></span>
            </div>
            <p>
              <van-text-ellipsis
                rows="2"
                :content="v[0].textdescword"
                expand-text="展开"
                collapse-text="收起"
              />
            </p>
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from 'axios'
import type { doctorState } from '@/interface'
const route = useRoute()
const router = useRouter()
const value = ref(5)
const id = route.params.id
const v = ref()
const show = ref(false)
const currentIndex = ref(0)
const showMake = ref(false)
const showPopup = () => {
  show.value = true
}
const list = ref([
  '08:00 剩余1',
  '08:30 剩余1',
  '09:00 剩余1',
  '09:30 剩余1',
  '10:00 剩余1',
])
const yy = ref()
const getDetailData = async () => {
  const res = await axios.get('/api/doctor/detail', { params: { id: id } })
  v.value = res.data.data
  yy.value = res.data.data[0]
}
getDetailData()

const handYYGH = (v: string) => {
  router.push(`/YYGH/${id}`)
}
const onMake = (v: string) => {
  showMake.value = true
}

const onTab = (v: string, i: number) => {
  currentIndex.value = i
}



</script>
